<template>
  <div class="depart-dialog">
    <el-dialog
      v-model="visible"
      title="个性化设置"
      width="520px"
      :before-close="handleClose"
    >
      <div class="dialog-content">
        <span class="tips"
          >根据您的喜好选择喜欢的肤色，该设置只对您的账号有效，企业其他成员不受影响</span
        >
        <div class="theme-select-box">
          <div
            v-for="(item, index) in themeList"
            :key="item.id"
            class="t-s-item"
            :style="{ borderColor: theme === index ? item.baseColor : '' }"
            @click="theme = index"
          >
            <div class="show" :style="{ background: item.baseColor }"></div>
            <div class="desc" :style="{ color: item.baseColor }">
              {{ item.desc }}
            </div>
          </div>
          <div class="t-s-item"></div>
          <div class="t-s-item"></div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="default" @click="handleClose" plain>取消</el-button>
          <el-button type="primary" @click="handleEnsureTheme">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
export default defineComponent({
  name: "ThemeSettingsDialog",
  setup() {
    const state = reactive({
      visible: false,
      theme: "",
      loading: false,
      themeList: [
        {
          id: 0,
          desc: "青色",
          baseColor: "#0aa1b6",
        },
        {
          id: 1,
          desc: "绿色",
          baseColor: "#0bb27a",
        },
        {
          id: 2,
          desc: "粉色",
          baseColor: "#e56281",
        },
        {
          id: 3,
          desc: "紫色",
          baseColor: "#6076e3",
        },
      ],
    });
    const methods = {
      handleClose() {
        state.visible = false;
      },
      handleOpen() {
        state.visible = true;
        methods.getBorderColor();
      },
      getBorderColor() {
        const storageItem = JSON.parse(localStorage.getItem("theme"));
        if (storageItem) {
          const index = state.themeList.findIndex(
            (el) => el.baseColor === storageItem.baseColor
          );
          if (index || index === 0) {
            state.theme = index;
          }
        }
      },
      handleEnsureTheme() {
        const storageItem = JSON.parse(localStorage.getItem("theme"));
        if (state.theme || state.theme === 0) {
          const item = state.themeList[state.theme];
          if (item.baseColor !== storageItem.baseColor) {
            methods.setTheme(item);
          }
          localStorage.setItem("theme", JSON.stringify(item));
          ElMessage.success("已成功切换主题");
          methods.handleClose();
        }
      },
      setTheme(item) {
        document.body.style.setProperty("--baseColor", item.baseColor);
        document.body.style.setProperty("--el-color-primary", item.baseColor);
      },
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
</script>

<style scoped lang="less">
.dialog-content {
  padding: 32px 20px;
  .tips {
    color: #80848f;
    font-size: 12px;
    display: inline-flex;
    line-height: 1.4em;
  }
  .theme-select-box {
    padding-top: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    .t-s-item {
      width: 24%;
      height: 100px;
      cursor: pointer;
      border-radius: 5px;
      border: 1px solid #f1f1f1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &:nth-last-child(-n + 2) {
        border: none;
        height: 0;
      }
      .show {
        margin-top: 20px;
        width: 40px;
        height: 40px;
        border-radius: 4px;
      }
      .desc {
        font-weight: 700;
        margin-top: 10px;
      }
    }
  }
}
.d-c-footer {
  height: 56px;
  border-top: 1px solid #eee;
  line-height: 56px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .operate-btn {
    margin-right: 20px;
  }
}
</style>
